﻿@page "/components/dropdown"

<Pager Title="Dropdown" Description="Dropdowns are toggleable, contextual overlays for displaying lists of links and more.They’re toggled by clicking, not by hovering"
Indicates="@(new[]{"Example","Split button","Size","Dark dropdowns","Directions","Dropdown item text",
"Active","Disabled","Header item","Divider item"})"
>
		<Demo Title="Example">
		<Description>
			Set <code>DropDown</code> for <code>Button</code> to active dropdown toggle.
		</Description>
		<Run>
			<DropDown>
				<Button DropDown Color="Color.Primary">Dropdown Button</Button>
				<DropDownMenu>
					<DropDownLinkItem href="#">Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				</DropDownMenu>
			</DropDown>
		</Run>
		<Code>
			@MD.Write(@"
```html
<DropDown>
	<Button DropDown Color=""Color.Primary"">Dropdown Button</Button>
	<DropDownMenu>
		<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
	</DropDownMenu>
</DropDown>
```
			")
		</Code>
	</Demo>
		<Demo Title="Split button">
		<Description>

		</Description>
		<Run>
			<ButtonGroup>
				<Button Color="Color.Primary">Action</Button>
				<Button DropDown DropDownSplit Color="Color.Primary">
					<Element TagName="span" CssClass="Css.Class.VisuallyHidden()">Split</Element>
				</Button>
				<DropDownMenu>
					<DropDownLinkItem href="#">Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				</DropDownMenu>
			</ButtonGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ButtonGroup>
	<Button Color=""Color.Primary"">Action</Button>
	<Button DropDown DropDownSplit Color=""Color.Primary"">
		<Element TagName=""span"" CssClass=""Css.Class.VisuallyHidden()"">Split</Element>
	</Button>
	<DropDownMenu>
		<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
	</DropDownMenu>
</ButtonGroup>
```
			")
		</Code>
	</Demo>
		<Demo Title="Size">
		<Description>
			Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
		</Description>
		<Run>
			<DropDown>
				<Button DropDown Color="Color.Warning" Size="Size.Small">Small Button</Button>
				<DropDownMenu>
					<DropDownLinkItem href="#">Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				</DropDownMenu>
			</DropDown>
		</Run>
		<Code>
			@MD.Write(@"
```html
<DropDown>
	<Button DropDown Color=""Color.Warning"" Size=""Size.Small"">Small Button</Button>
	<DropDownMenu>
		<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
	</DropDownMenu>
</DropDown>
```
			")
		</Code>
	</Demo>
		<Demo Title="">
		<Description>

		</Description>
		<Run>	
			<ButtonGroup>
				<Button Color="Color.Success" Size="Size.Large">Large Size</Button>
				<Button DropDown DropDownSplit Color="Color.Success" Size="Size.Large">
					<Element TagName="span" CssClass="Css.Class.VisuallyHidden()">Split</Element>
				</Button>
				<DropDownMenu>
					<DropDownLinkItem href="#">Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				</DropDownMenu>
			</ButtonGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ButtonGroup>
	<Button Color=""Color.Success"" Size=""Size.Large"">Large Size</Button>
	<Button DropDown DropDownSplit Color=""Color.Success"" Size=""Size.Large"">
		<Element TagName=""span"" CssClass=""Css.Class.VisuallyHidden()"">Split</Element>
	</Button>
	<DropDownMenu>
		<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
	</DropDownMenu>
</ButtonGroup>
```
			")
		</Code>
	</Demo>
			<Demo Title="Dark dropdowns">
		<Description>
			Set <code>Dark</code> for <code>DropDownMenu</code> component.
		</Description>
		<Run>
			<DropDown>
				<Button DropDown>Dropdown Button</Button>
				<DropDownMenu Dark>
					<DropDownLinkItem href="#">Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				</DropDownMenu>
			</DropDown>
		</Run>
		<Code>
			@MD.Write(@"
```html
<DropDown>
	<Button DropDown>Dropdown Button</Button>
	<DropDownMenu Dark>
		<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
	</DropDownMenu>
</DropDown>
```
			")
		</Code>
	</Demo>
		<Demo Title="Directions">
		<Description>
			Trigger dropdown menus above elements by adding <code>DropDownDirection</code> to the <code>CssClass</code> of parent element.
		</Description>
		<Run>
			<ButtonGroup CssClass="Css.DropDownPlacement(DropDownDirection.Up)">
				<Button DropDown>Dropup</Button>
				<DropDownMenu>
					<DropDownLinkItem href="#">Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				</DropDownMenu>
			</ButtonGroup>

			<ButtonGroup CssClass="Css.DropDownPlacement(DropDownDirection.Right)">
				<Button DropDown>Dropright</Button>
				<DropDownMenu>
					<DropDownLinkItem href="#">Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				</DropDownMenu>
			</ButtonGroup>
			<ButtonGroup CssClass="Css.DropDownPlacement(DropDownDirection.Down)">
				<Button DropDown>Dropdown</Button>
				<DropDownMenu>
					<DropDownLinkItem href="#">Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				</DropDownMenu>
			</ButtonGroup>
			<ButtonGroup CssClass="Css.DropDownPlacement(DropDownDirection.Left)">
				<Button DropDown>Dropleft</Button>
				<DropDownMenu>
					<DropDownLinkItem href="#">Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
					<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				</DropDownMenu>
			</ButtonGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ButtonGroup CssClass=""Css.DropDownPlacement(DropDownDirection.Up)"">
	<Button DropDown>Dropup</Button>
	<DropDownMenu>
		...
	</DropDownMenu>
</ButtonGroup>

<ButtonGroup CssClass=""Css.DropDownPlacement(DropDownDirection.Right)"">
	<Button DropDown>Dropright</Button>
	<DropDownMenu>
		...
	</DropDownMenu>
</ButtonGroup>

<ButtonGroup CssClass=""Css.DropDownPlacement(DropDownDirection.Down)"">
	<Button DropDown>Dropdown</Button>
	<DropDownMenu>
		...
	</DropDownMenu>
</ButtonGroup>

<ButtonGroup CssClass=""Css.DropDownPlacement(DropDownDirection.Left)"">
	<Button DropDown>Dropleft</Button>
	<DropDownMenu>
		...
	</DropDownMenu>
</ButtonGroup>
```
			")
		</Code>
	</Demo>
	<h4>Menu Items</h4>
	<br />
		<Demo Title="Dropdown item text">
		<Description>
			create non-interactive dropdown items with <code>DropDownTextItem</code> component.
		</Description>
		<Run>
			<DropDownMenu AdditionalCssClass="example-menu">
				<DropDownTextItem>DropDown Item Text</DropDownTextItem>
				<DropDownLinkItem href="#">Action</DropDownLinkItem>
				<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
				<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
			</DropDownMenu>
		</Run>
		<Code>
			@MD.Write(@"
```html
<DropDownMenu>
	<DropDownTextItem>DropDown Item Text</DropDownTextItem>
	<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
</DropDownMenu>
```
			")
		</Code>
	</Demo>
			<Demo Title="Active">
		<Description>
		</Description>
		<Run>
			<DropDownMenu AdditionalCssClass="example-menu">
				<DropDownLinkItem href="#" Active>Action</DropDownLinkItem>
				<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
				<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
			</DropDownMenu>
		</Run>
		<Code>
			@MD.Write(@"
```html
<DropDownMenu>
	<DropDownLinkItem href=""#"" Active>Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
</DropDownMenu>
```
			")
		</Code>
	</Demo>
				<Demo Title="Disabled">
		<Description>
		</Description>
		<Run>
			<DropDownMenu AdditionalCssClass="example-menu">
				<DropDownLinkItem href="#">Action</DropDownLinkItem>
				<DropDownLinkItem href="#" Disabled>Another Action</DropDownLinkItem>
				<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
			</DropDownMenu>
		</Run>
		<Code>
			@MD.Write(@"
```html
<DropDownMenu>
	<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"" Disabled>Another Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
</DropDownMenu>
```
			")
		</Code>
	</Demo>
			<Demo Title="Header item">
		<Description>
			Add a header to label sections of actions in any dropdown menu.
		</Description>
		<Run>
			<DropDownMenu AdditionalCssClass="example-menu">
				<DropDownHeaderItem>Dropdown header</DropDownHeaderItem>
				<DropDownLinkItem href="#">Action</DropDownLinkItem>
				<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
				<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
			</DropDownMenu>
		</Run>
		<Code>
			@MD.Write(@"
```html
<DropDownMenu>
	<DropDownHeaderItem>Dropdown header</DropDownHeaderItem>
	<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
</DropDownMenu>
```
			")
		</Code>
	</Demo>
				<Demo Title="Divider item">
		<Description>
			Separate groups of related menu items with a divider.
		</Description>
		<Run>
			<DropDownMenu AdditionalCssClass="example-menu">
				<DropDownLinkItem href="#">Action</DropDownLinkItem>
				<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
				<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
				<DropDownDividerItem />
				<DropDownLinkItem href="#">Seperated item</DropDownLinkItem>
			</DropDownMenu>
		</Run>
		<Code>
			@MD.Write(@"
```html
<DropDownMenu>
	<DropDownHeaderItem>Dropdown header</DropDownHeaderItem>
	<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
	<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
	<DropDownDividerItem />
	<DropDownLinkItem href=""#"">Seperated item</DropDownLinkItem>
</DropDownMenu>
```
			")
		</Code>
	</Demo>
</Pager>